<!--
 * @Author: CemCode cemoment@aliyun.com
 * @Date: 2022-12-07 05:04:37
 * @LastEditors: CemCode cemoment@aliyun.com
 * @LastEditTime: 2022-12-07 06:30:15
 * @FilePath: \vue-blog-2\src\components\RandomFlower.vue
 * @Description: 随机花瓣分布
 * Copyright (c) 2022 by CemCode cemoment@aliyun.com, All Rights Reserved. 
-->
<template>
    <div class='flower_con' ref="flower_dom">
        <img :src="img_src" v-for="(imgStyle,index) in flowers" :key="index" :style="imgStyle" />
    </div>
</template>

<script>
export default {
    props: {
        src: {
            type: String,
        },
        num: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            img_src: this.src,
            nums: this.num,
            flowers: [] // 存随机数据后的花朵位置
        }
    },
    mounted() {
        let maxWidth = this.$refs.flower_dom.clientWidth;
        let maxHeight = this.$refs.flower_dom.clientHeight;
        let list = [];
        for (let i = 0; i < this.nums; i++) {
            let left = Math.random() * maxWidth;
            // 每朵花都给个随机的动画执行速度
            let s = Math.random()*20+2;
            // maxHeight/2 是尽量让花朵的大小和高低位置在中等范围
            let top = Math.random() * maxHeight/1.5;
            let height = Math.random() * maxHeight/1.5;
            // 防止生成太小花朵情况
            height < maxHeight / 3 && (height = maxHeight / 3);
            // 阻止超出范围生成
            top+height > maxHeight && (top -= height);
            left+height > maxWidth && (left -= height);
            
            list.push(`left:${left}px;top:${top}px;height:${height}px;animation-duration:${s}s;`);
        }
        this.flowers = list;
    }
}
</script>

<style lang='scss' scoped>
.flower_con {
    width: 100%;
    height: 100px;
    position: relative;

    img {
        position: absolute;
        max-height: 50px;
        animation: flower_rotate 3s infinite linear;
    }

    @keyframes flower_rotate {
        0%{}
        100%{
            transform: rotate(360deg);
        }
    }
}
</style>
